<template>
  <div class="h100" ref="projectTableList">
    <s-table
      ref="table"
      class="h100"
      :rowKey="(record,index)=>{return index}"
      :columns="columns"
      :data="loadData"
      :scrollX="900"
      @getPagination="getPagination"
    >
      <template slot-scope="text" v-for="column in commonColumns" :slot="column.scopedSlots.customRender">
        <table-ellipsis :text="text" :key="column.dataIndex"></table-ellipsis>
      </template>
      <template slot="changeData" slot-scope="text,record">
        <span @click="checkData(record.changeData,record.logType,times,record.logTitle,record.object)">查看</span>
      </template>
    </s-table>
    <a-modal
      :title="titleUpdate"
      :visible="visibleChangeUpdate"
      @ok="handleOk"
      @cancel="handleCancel"
      class="nvv"
    >
      <a-table id="table1" class=".h100" ref="table1" :rowKey="(record,index)=>{return index}" @change="handleTableChange" :pagination="pagination"  :dataSource="loadDataRecordUpdate" :columns="columnsChangeUpdate" >
      </a-table>
    </a-modal>
    <a-modal
      :title="titleNew"
      :visible="visibleChangeNew"
      @ok="handleOk"
      @cancel="handleCancel"
      class="nvv"
    >
      <a-table id="table2" class=".h100" ref="table2" :rowKey="(record,index)=>{return index}" @change="handleTableChange" :pagination="pagination" :dataSource="loadDataRecordNew" :columns="columnsChangeNew" >
      </a-table>
    </a-modal>
    <a-modal
      :title="titleDelete"
      :visible="visibleChangeDelete"
      @ok="handleOk"
      @cancel="handleCancel"
      class="nvv"
    >
      <a-table id="table3" class=".h100" ref="table3" :rowKey="(record,index)=>{return index}" @change="handleTableChange" :pagination= "pagination" :dataSource="loadDataRecordDelete" :columns="columnsChangeDelete" >
      </a-table>
    </a-modal>
    <a-modal
      :title="titleDelete"
      :visible="visibleChangeDelete0"
      @ok="handleOk"
      @cancel="handleCancel"
      class="nvv"
    >
      <a-table id="table4" class=".h100" ref="table4" :rowKey="(record,index)=>{return index}" @change="handleTableChange" :pagination= "pagination" :dataSource="loadDataRecordDelete0" :columns="columnsChangeDelete0" >
      </a-table>
    </a-modal>
    <a-modal
      :title="titleDelete"
      :visible="visibleChangeDelete5"
      @ok="handleOk"
      @cancel="handleCancel"
      class="nvv"
    >
      <a-table id="table5" class=".h100" ref="table5" :rowKey="(record,index)=>{return index}" @change="handleTableChange" :pagination= "pagination" :dataSource="loadDataRecordDelete5" :columns="columnsChangeDelete5" >
      </a-table>
    </a-modal>
    <a-modal
      :title="titleDelete"
      :visible="visibleChangeDelete6"
      @ok="handleOk"
      @cancel="handleCancel"
      class="nvv"
    >
      <a-table id="table6" class=".h100" ref="table6" :rowKey="(record,index)=>{return index}" @change="handleTableChange" :pagination= "pagination" :dataSource="loadDataRecordDelete6" :columns="columnsChangeDelete6" >
      </a-table>
    </a-modal>
  </div>
</template>
<script>
import { sysLogTbColumns } from '../config/list'
import tableEllipsis from '@/components/Ellipsis/TableEllipsis'
import sysLogApi from '@/api/modules/system/operateLog'
import { mapState } from 'vuex'
import { STable } from '@/components'
import AuthText from '@/components/AuthText'
import { managePerms } from '@/config/permission/index'
import i18n from '../../../../lang'
import i18n1 from '../../../../lang/ope'
import { Sortable } from 'sortablejs'



export default {
  components: {
    tableEllipsis,
    STable,
    AuthText
  },
  computed: {
    ...mapState({
      queryParams: (state) => state.sysDataLog.queryParams
    }),
    commonColumns () {
      return this.columns.filter(item => !item.special)
    }
  },
  data () {
    return {
      titleUpdate: '变更数据',
      titleNew: '新增数据',
      titleDelete: '删除数据',
      table1: 'table1',
      times: 0,
      firstClickLogType: "",
      secondClickLogType: "",
      columns: sysLogTbColumns,
      visibleChangeUpdate: false,
      visibleChangeNew: false,
      visibleChangeDelete: false,
      visibleChangeDelete0: false,
      visibleChangeDelete5: false,
      visibleChangeDelete6: false,
      loadDataRecordUpdate: [],
      loadDataRecordDelete: [],
      loadDataRecordDelete0: [],
      loadDataRecordDelete5: [],
      loadDataRecordDelete6: [],
      loadData0: [],
      loadDataRecordNew: [],
      columnsChangeUpdate: [
        {
          title: i18n.t('propertiesName'),
          dataIndex: 'field',
          width: 60,
          key: 'propertiesName',
          customRender: (field) => {
            return i18n1.t(field)
          },
          special: true,
          ellipsis: true
        },
        {
          title: i18n.t('fromPropertiesData'),
          dataIndex: 'before',
          width: 70,
          key: 'fromPropertiesData',
          special: true,
          ellipsis: true
        },
        {
          title: i18n.t('toPropertiesData'),
          dataIndex: 'after',
          width: 70,
          key: 'toPropertiesData',
          special: true,
          ellipsis: true
        }
      ],
      columnsChangeNew: [
        {
          title: i18n.t('propertiesName'),
          dataIndex: 'field',
          width: 60,
          key: 'propertiesName',
          customRender: (field) => {
            return i18n1.t(field)
          },
          special: true,
          ellipsis: true
        },
        {
          title: i18n.t('propertiesDataNew'),
          dataIndex: 'after',
          width: 70,
          key: 'propertiesDataNew',
          special: true,
          ellipsis: true
        }
      ],
      columnsChangeDelete: [
        {
          title: i18n.t('propertiesName'),
          dataIndex: 'field',
          key: 'propertiesName',
          customRender: (field) => {
            return i18n1.t(field)
          },
          special: true,
          ellipsis: true
        },
        {
          title: i18n.t('propertiesDataVersion'),
          dataIndex: 'before',
          key: 'propertiesDataVersion',
          special: true,
          ellipsis: true
        }
      ],
      columnsChangeDelete5: [
        {
          title: i18n.t('propertiesName'),
          dataIndex: 'field',
          key: 'propertiesName',
          customRender: (field) => {
            return i18n1.t(field)
          },
          special: true,
          ellipsis: true
        },
        {
          title: i18n.t('propertiesDataStrategyName'),
          dataIndex: 'before',
          key: 'propertiesDataStrategyName',
          special: true,
          ellipsis: true
        }
      ],
      columnsChangeDelete6: [
        {
          title: i18n.t('propertiesName'),
          dataIndex: 'field',
          key: 'propertiesName',
          customRender: (field) => {
            return i18n1.t(field)
          },
          special: true,
          ellipsis: true
        },
        {
          title: i18n.t('propertiesDataTaskName'),
          dataIndex: 'before',
          key: 'propertiesDataTaskName',
          special: true,
          ellipsis: true
        }
      ],
      columnsChangeDelete0: [
        {
          title: i18n.t('propertiesName'),
          dataIndex: 'field',
          key: 'propertiesName',
          customRender: (field) => {
            return i18n1.t(field)
          },
          special: true,
          ellipsis: true
        },
        {
          title: i18n.t('propertiesDataName'),
          dataIndex: 'before',
          key: 'propertiesDataName',
          special: true,
          ellipsis: true
        },
        {
          title: i18n.t('propertiesDataID'),
          dataIndex: 'after',
          key: 'propertiesDataID',
          special: true,
          ellipsis: true
        }
      ],
      pagination: {
        current: 1,
        defaultPageSize: 10, // 默认5条
        total: 0,
        showSizeChanger: false,
        showQuickJumper: false,
      },
      managePerms
    }
  },
  watch: {
  },
  created () {
  },
  mounted () {
  },
  methods: {
    loadData (parameter) {
      const params = { ...parameter, ...this.queryParams }
      if (params.startTime) {
        params.startTime = params.startTime + ':00'
      }
      if (params.endTime) {
        params.endTime = params.endTime + ':00'
      }
      this.loadData0 = sysLogApi.getSysLogPageData(params);
      return this.loadData0
    },
    checkData (data, logType,times,logTitle,object) {
      console.log(JSON.parse(data))
      this.times = times + 1
      if(times===1){
        this.firstClickLogType = logType
      }
      if(times > 1 && this.firstClickLogType != logType) {
        this.secondClickLogType = logType
      }
      if (logType === '新增') {
        this.titleNew = '新增数据    ' + object;
        this.loadDataRecordNew = JSON.parse(data)
        const vm = this
        vm.$nextTick(() => {
          vm.$refs.table2.refresh(true)
        })
        this.visibleChangeNew = true
      } else if (logType === '删除') {
        this.titleDelete = '删除数据    ' + object;
        if(logTitle === '删除车辆' || logTitle === '删除车型' || logTitle === '删除ECU'){
          this.loadDataRecordDelete0 = JSON.parse(data)
          const vm = this
          vm.$nextTick(() => {
            vm.$refs.table4.refresh(true)
          })
          this.visibleChangeDelete0 = true
        } if(logTitle === '删除策略'){
          this.loadDataRecordDelete5 = JSON.parse(data)
          const vm = this
          vm.$nextTick(() => {
            vm.$refs.table5.refresh(true)
          })
          this.visibleChangeDelete5 = true
        } if(logTitle === '删除任务'){
          this.loadDataRecordDelete6 = JSON.parse(data)
          const vm = this
          vm.$nextTick(() => {
            vm.$refs.table6.refresh(true)
          })
          this.visibleChangeDelete6 = true
        }else {
          this.loadDataRecordDelete = JSON.parse(data)
          const vm = this
          vm.$nextTick(() => {
            vm.$refs.table3.refresh(true)
          })
          this.visibleChangeDelete = true
        }
      } else {
        this.titleUpdate = '变更数据    ' + object;
        this.loadDataRecordUpdate = JSON.parse(data)
        const vm = this
        vm.$nextTick(() => {
          vm.$refs.table1.refresh(true)
        })
        this.visibleChangeUpdate = true
      }
      setTimeout(() => {
        // this.initSortable(logType,this.firstClickLogType,this.secondClickLogType);
      }, 5);
    },
    handleOk () {
      this.pagination.current = 1
      this.visibleChangeNew = false
      this.visibleChangeUpdate = false
      this.visibleChangeDelete = false
      this.visibleChangeDelete0 = false
      this.visibleChangeDelete5 = false
      this.visibleChangeDelete6 = false
    },
    handleCancel () {
      this.pagination.current = 1
      this.visibleChangeNew = false
      this.visibleChangeUpdate = false
      this.visibleChangeDelete = false
      this.visibleChangeDelete0 = false
      this.visibleChangeDelete5 = false
      this.visibleChangeDelete6 = false
    },

    handleTableChange(pagination) {
      this.pagination.current = pagination.current;
      this.pagination.pageSize = pagination.pageSize;
    },
    refreshData (isToFirstPage = true) {
      const vm = this
      vm.$nextTick(() => {
        vm.$refs.table.refresh(isToFirstPage)
      })
    },

    initSortable (logType,firstClickLogType,secondClickLogType) {
      var that = this
      if (firstClickLogType == logType){
        el = document.getElementsByTagName("tbody")[1]
      }else if (secondClickLogType == logType) {
        el = document.getElementsByTagName("tbody")[2]
      } else {
        el = document.getElementsByTagName("tbody")[3]
      }

      Sortable.create(el, {
        handle: '.ant-table-row',
        animation: 150,
        group: { name: 'name', pull: true, put: true },
        //这里千万不要用onEnd 方法
        onUpdate: function (evt) {
          var o = evt.oldIndex
          var n = evt.newIndex
          if (o === n) {
            return
          }
          if ("新增" === logType) {
            that.sortListAndUpdate(that.loadDataRecordNew, o, n, logType)
          } else {
            that.sortListAndUpdate(that.loadDataRecordUpdate, o, n, logType)
          }
        },
      })
    },
     getPagination () {

    },
    // 对数据进行排序，要求 o（oldIndex） 和 n（newIndex） 从 0开始
    sortList (list, o, n) {
      const newTableData = JSON.parse(JSON.stringify(list))
      const data = newTableData.splice(o, 1, null)
      newTableData.splice(o < n ? n + 1 : n, 0, data[0])
      newTableData.splice(o > n ? o + 1 : o, 1)
      return newTableData
    },
    /**
     * 对数据排序并更新 table， 要求 o（oldIndex） 和 n（newIndex） 从 0开始
     */
    sortListAndUpdate (list, o, n, logType) {
      const newTableData = this.sortList(list, o, n)
      newTableData.forEach((item, index) => {
        item.rowKey = index + 1
      })
      this.$nextTick(() => {
        if ("新增" === logType) {
          this.loadDataRecordNew = newTableData
          this.$refs.table2 && this.$refs.table2.refresh(true)
        } else {
          this.loadDataRecordUpdate = newTableData
          this.$refs.table1 && this.$refs.table1.refresh(true)
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
  span {
    display: inline-block;
    width: 100%;
    text-align: left;
    color: #649eb3;
    // letter-spacing: 5px;
    // font-weight: bold;
    font-style: inherit;
  }
</style>
